<script setup lang="ts">
import { Button, Cell, CellGroup, showSuccessToast, Space } from 'vant'
import { onBeforeUnmount, onMounted, Ref, ref } from 'vue'
import DeltaValue from './components/DeltaValue.vue'
import { socket } from './socket'

/**
 * 当前的游戏状态
 */
interface State {
    /**
     * 最近轮次的数据
     */
    trends: Round[]
    /**
     * 开关
     */
    flags: Record<string, string>
    /**
     * 本小时开奖时间
     */
    minutes: {
        time: string
        gift_price: number
    }[]
}

/**
 * 最近轮次的数据
 */
interface Round {
    time: string
    gift_price: number
    balance: number
    in: number
    out: number
}

onMounted(() => {
    socket.on('xyc:state', onState)
    socket.on('reconnect', onReconnect)
    socket.emit('xyc:get_state')
})
onBeforeUnmount(() => {
    socket.off('xyc:state', onState)
    socket.off('reconnect', onReconnect)
})

const onReconnect = () => {
    socket.emit('xyc:get_state')
}

const state = ref() as Ref<State>

const onState = (v: State) => {
    state.value = v
}

const toggleFlag = (key: string) => {
    if (!state.value) return
    const next = state.value.flags[key] === '1' ? '0' : '1'
    socket.emit('xyc:set_flag', key, next)
}

const copyTimes = () => {
    if (!state.value) return
    navigator.clipboard.writeText(state.value.minutes.map((time) => `${time.time}开${time.gift_price}`).join('\r\n'))
    showSuccessToast('已复制')
}
</script>
<template>
    <template v-if="state">
        <CellGroup>
            <Cell title="开奖时间" @click="copyTimes">
                <div v-for="item in state.minutes" :key="item.time">{{ item.time }} -> x{{ item.gift_price }}</div>
            </Cell>
            <Cell title="开关">
                <Space>
                    <Button
                        size="small"
                        :type="state.flags.xyc_o1 === '1' ? 'danger' : 'default'"
                        @click="toggleFlag('xyc_o1')"
                        >必中：{{ state.flags.xyc_o1 === '1' ? '开' : '关' }}</Button
                    >
                    <Button
                        size="small"
                        :type="state.flags.xyc_o2 === '1' ? 'danger' : 'default'"
                        @click="toggleFlag('xyc_o2')"
                        >不开：{{ state.flags.xyc_o2 === '1' ? '开' : '关' }}</Button
                    >
                </Space>
            </Cell>
        </CellGroup>
        <table class="table">
            <tr>
                <th>时间</th>
                <th>奖池</th>
                <th>开奖</th>
                <th>下注</th>
                <th>变化</th>
            </tr>
            <tr v-for="row in state.trends" :key="row.time">
                <td>{{ row.time }}</td>
                <td>{{ row.balance }}</td>
                <td>{{ row.gift_price }}</td>
                <td>{{ row.in }}</td>
                <td>
                    <DeltaValue :value="row.in - row.out" />
                </td>
            </tr>
        </table>
    </template>
</template>
<style lang="scss" scoped>
.table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: #fff;

    th,
    td {
        border: 1px solid #eee;
        font-size: 14px;
        padding: 8px 0;
        text-align: center;
        font-weight: normal;
    }
}
</style>
